<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<script src="../../js/mui.min.js"></script>
		 <script src="../../js/app.js"></script>
		<script type="text/javascript">
		</script>
		</head>
		<style type="text/css">
/*瀑布流*/
/*其中的 column-count 代表分几列，column-gap 代表列和列之间的宽。 column-width 来定义列宽。*/
* {
  padding: 0;
  margin: 0;
}
#main {
	/*column-count: 1;
	    -webkit-column-width: 30%;
    -moz-column-width: 30%;
    -o-column-width: 30%;
    column-width: 30%;
    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    -o-column-gap: 5px;
    column-gap: 5px;*/
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -moz-column-gap:2px;
  -webkit-column-gap:2px;
  column-gap:2px;
  padding:5px 5px;
 position: relative;
}
.box {
height:100%;overflow: auto;
  position: relative;
  padding: 4px;
  border: solid 2px #eeeeee;
  border-radius: 5px;
  margin:6px  3px;
  /*cursor: pointer;
  background: #FFF;
		text-align:center;
		/*float:left;*/ 
		max-height:380px;
		/*overflow:hidden;*/
		box-shadow:2px 2px 6px #b5b5b5;
		line-height:1.2;
		/*margin:5px 1px;*/
		/*padding:2px;*/
}
.pic{
	/*margin-bottom:30px ;*/
}
.box img {
  width: 100%;
}
/*瀑布流结束*/



.tb{
		float: left;
		background: #00BFFF;
		list-style-type:none;
		text-align: center;
	}
	.tb1{
		/*padding: 1px;
		width: 33%;
		float: left;*/
		/*background: #00BFFF;*/
		/*list-style-type:none;
		text-align: center;*/
	}

	.td{
		padding: 5px;
		width: 100px;
		/*height: 100px;*/
		width: 30%;
		/*height:90%;*/
		margin:5px 1.6%;
		float:left;
		background: #FFF;
	}
	.tb img{
		width: 100%;
	}

.con{
		margin: 5px;
	}
	.con .pic{
		background: #FFF;
		text-align:center;
		border-radius:3px;
		float:left; 
		max-height:380px;
		overflow:hidden;
		box-shadow:2px 2px 6px #b5b5b5;
		line-height:1.2;
		margin:5px 1px;
		padding:2px;
		}
	.con span{
		padding: 2px;
	}
	.pic{
		/*max-width:150px;*/
		/*text-align:center;
		min-height:30px;*/
		/*padding:5px;*/
	}
	.pic img{
		margin:0;
		width:100%;
		min-height:10px;
		/*max-width:100px;*/
	}
	.pic:active {background: #F0F0F0}
		</style>
		<body>
		<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">商城首页</h1>
	</header>
	  <div class="mui-content">

      	<!--轮播-->
  	    <div class="mui-slider">
			  <div class="mui-slider-group">
			    <!--第一个内容区容器-->
			    <div class="mui-slider-item">
			    	<img src="../../datu.jpg" alt="" />
			      <!-- 具体内容 -->
			    </div>
			    
			    <!--第二个内容区-->
			    <div class="mui-slider-item">
			    	<img src="../../datu.jpg" alt="" />
			      <!-- 具体内容 -->
			    </div>
			  </div>
		</div>
	  	 <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
    <div class="mui-scroll" style="background: #FFB400;">
        <a class="mui-control-item mui-active">
            推荐
        </a>
        <a class="mui-control-item">
            热点
        </a>
        <a class="mui-control-item">
            北京
        </a>
        <a class="mui-control-item">
            社会
        </a>
        <a class="mui-control-item">
            娱乐
        </a>
        <a class="mui-control-item">
            科技
        </a>
    </div>
  </div>
  <!--瀑布流-->
  <div id="main"></div>
  <div style="margin-bottom:50px;float: left;width: 100%;">
  	<div class="slide-box" id="cons" style="float:left;width: 100%;"></div>
  	<!--<div class="slide-box" id="cons1" style="float:left;width: 33%;"></div>
  	<div class="slide-box" id="cons2" style="float:left;width: 33%;"></div>
  	<div class="slide-box" id="cons3" style="float:left;width: 33%;"></div>-->
  </div>
  	</div>
	<nav class="mui-bar mui-bar-tab" id="nav">
        <a class="mui-tab-item mui-active" id="home">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" id="a2">
            <span class="mui-icon mui-icon-chatboxes"></span>
            <span class="mui-tab-labe2">消息</span>
        </a>
        <a class="mui-tab-item" id="a3">
            <span class="mui-icon-extra mui-icon-extra-peoples"></span>
            <span class="mui-tab-labe3">好友</span>
        </a>
        <a class="mui-tab-item" id="a4">
            <span class="mui-icon mui-icon-person" onclick="my()"></span>
            <span class="mui-tab-labe4" onclick="goto('goods','admin','admin')">我的</span>
        </a>
    </nav>
    <script type="text/javascript">
	var cons1=document.getElementById('cons1');
	var cons2=document.getElementById('cons2');
	var cons3=document.getElementById('cons3');
//	'+(cons1).height()+'
//	alert(cons2.offsetHeight);
//	for(var i=0;i<10;i++){
////		if(cons2.offsetHeight && cons2.offsetHeight>cons1.offsetHeight){
//		html='<div class="con" style=""><div class="pic"  style="padding:5px;position:relative;max-width:auto;min-height:30px;padding:2px;" ><img  style="" src="../../images/qq.png" onclick="goto(\'goods\',\'home\',\'detail\',\'1\')" /><span style="position:absolute;top:0px;right:0px;border-radius:9px;text-align:center;color:#fff;background:red;padding:2px">25元</span><h5><span id="height'+i+'">'+cons1.offsetHeight+'</span>鱼香肉丝</h5> <p>嗯嗯</p></div></div>';
////		document.getElementById('height'+i).innerHTML=document.getElementById("cons2").offsetHeight||document.getElementById("cons2").clientHeight;	
//		if(cons3.offsetHeight>=cons1.offsetHeight && cons2.offsetHeight>=cons1.offsetHeight){
//
//			cons1.innerHTML+=html;
////			cons1.appendChild(html);
//		}else if(cons1.offsetHeight>cons2.offsetHeight && cons3.offsetHeight>=cons2.offsetHeight){
//			cons2.innerHTML+=html;
////			cons2.appendChild(html);
//		}else{
//			cons3.innerHTML+=html;
//		}
//		
//	}
item(0);	
function item(num){//我发布的项目
	if(num==1){
		p=p+1
	}else{
		p=0;
		cons.innerHTML='';
//		cons2.innerHTML='';
//		cons3.innerHTML='';
	};
	apptoken['p']= p;
	apptoken['act']='list';
//		alert(JSON.stringify(apptoken));
		 mui.post(home.hos+'/goods',apptoken,function(data){
		 	alert('商品页'+JSON.stringify(data));
		var result=JSON.parse(data);
		 var val='';
		 var width = 300, height = 300;
//		 onerror="this.onerror=null;this.src=\'../../images/iconfont-tianjia.png\'"
	for(var i=0;i<result.length;i++){
//		alert(home.uploads+'/img/goods/'+result[i].poster);
//		html='<div class="con" style="width:30%;float:left"><div class="pic"  style="padding:5px;max-width:auto;height:130px;padding:10px;" ><img  style="width:95%;position:relative;" src="'+home.uploads+'/img/goods/'+result[i].poster+'"  onclick="goto(\'goods\',\'home\',\'detail\',\'1\')" /><span style="position:absolute;top:5px;right:5px;border-radius:9px;font-size:0.7em;text-align:center;color:#fff;background:red;padding:2px">'+result[i].moneyunit+'元</span><h5>'+result[i].title+'</h5> <p>编号：</p></div></div>';
		width = Math.floor(Math.random() * 100) + 300;
            height = Math.floor(Math.random() * 500) + 300;
		document.getElementById('main').innerHTML+=
		'<div class="box">'+
    		'<div class="pic" style="position:relative;" onclick="goto(\'goods\',\'home\',\'detail\',\''+result[i].id+'\')">'+
                    '<img style="position:relative;" src="'+home.uploads+'/img/goods/'+result[i].poster+'">'+
                '<span style="position:absolute;top:1px;right:1px;border-radius:9px;font-size:0.7em;text-align:center;color:#fff;background:red;padding:2px">'+result[i].price+'元</span><h5>'+result[i].title+'</h5>'+
                '</div>'+
            '</div>';
//			cons.innerHTML+=html;

//		val+='<li class="mui-table-view-cell mui-media admin-li-span" ><div class="mui-media-body " style="" ><div class="list-head"  onclick="goto(\'item\',\'home\',\'detail\','+result[i].id+')"><table><tr><td>项目状态</td><td><span>【'+result[i].stage+'】</span></td></tr><tr><td width="110px">项目名称</td><td>【'+result[i].title+'】</td></tr><tr><td width="110px">项目类型</td><td>【'+result[i].classname+'】</td></tr><tr><td>预计回报日期</td><td>【'+result[i].repaytime+'日】</td></tr><tr><td>总股份数</td><td>【'+result[i].share+'股/份】</td></tr><tr><td>每份估价</td><td>【'+result[i].moneyunit+'元】</td></tr><tr><td>预估总值约</td><td>【'+(result[i].share*result[i].moneyunit/10000)+'万】</td></tr><tr><td>筹备进度:'+(result[i].sharenow/result[i].share*100).toFixed(2)+'%</td><td>【已完成'+result[i].sharenow+'股】<br>【余'+(result[i].share-result[i].sharenow)+'股】</td></tr></table></div><p>发布于:2012-12-22</p><span onclick="goto(\'item\',\'admin\',\'orders_list\','+result[i].id+')">[预约管理]</span><span onclick="goto(\'item\',\'admin\',\'team_list\','+result[i].id+')">[团队管理]</span><span onclick="goto(\'item\',\'admin\',\'modify\','+result[i].id+')">[编辑]</span><span>[推广]</span></p></div></li>';
	};
//	document.getElementById("item").innerHTML+=val;
			//服务器返回响应，根据响应结果，分析是否登录成功；
	//		...
		},'text'
	);
}
	
	
	
/*
 * JSON数组去重
 * @param: [array] json Array
 * @param: [string] 唯一的key名，根据此键名进行去重
 * 使用方法 result=uniqueArray("[{"id":"5"}{"id":"5"}]","id");返回的result会删除相同id后返回数组
 */
function uniqueArray(array, key){
    var result = [array[0]];
    for(var i = 1; i < array.length; i++){
        var item = array[i];
        var repeat = false;
        for (var j = 0; j < result.length; j++) {
            if (item[key] == result[j][key]) {
                repeat = true;//遇到相同值无输出
                break;
            }
        }
        if (!repeat) {
        	//遇到不同的值装进数组
            result.push(item);
        }
    }
    //返回一个数组
    return result;
}
//localStorage.setItem(ckey,mess);
</script>
	</body>

</html>